import React, {Component} from 'react';
import './index.less';
import wpsPreStatus from '../../components/Header/functions/wpsPreStatus';
import {base, promptBox} from 'nc-lightapp-front';
import {CopyToClipboard} from 'react-copy-to-clipboard';
const {
    NCModal,
    NCButton,
    NCIcon,
    NCCheckbox
} = base;

const {
    Header: ModalHeader,
    Body: ModalBody,
    Footer: ModalFooter
} = NCModal;



class WpsInitModal extends Component {
    constructor(props) {
        super(props);
        this.closeModal = this.closeModal.bind(this);
        this.initModal = this.initModal.bind(this);
        this.onChangeHandle = this.onChangeHandle.bind(this);
        this.baseUrl = window.location.origin
    }

    closeModal() {
        const {
            onClose,
            json
        } = this.props;

        promptBox({
            color: 'warning',
            title: json['cm6011-000000'], // 确认取消
            content: json['cm6011-000001'], // 是否确认要取消
            beSureBtnClick: () => {
                onClose && onClose();
            }
        });   
    }

    initModal() {
        this.forceUpdate();
    }
    onChangeHandle(value) {
        console.log('点击控制配置前须知',value)
        this.props.updateState({
            isNeedWpsInterview: value
        })   
        wpsPreStatus({readstatus:value,url:this.props.originUrl})
            .then((res) => {
                if(res.success){
                    console.log('以改变后台')
                }
               
            });
        
    }
    shouldComponentUpdate(nextProps, nextState) {
        if(!this.props.visible && !nextProps.visible) {
            return false
        }

        return true;
    }

    render() {
        let {
            visible,
            json,
            isNeedWpsInterview
        } = this.props;
    
        return (
            <NCModal
                show={visible}
                onHide={this.closeModal}
                onEntered={this.initModal}
                className="design-report-modal"
                // size="lg"
            >
                <ModalHeader
                    closeButton={true}
                >
                    {json['cm6011-000169'] || "wps设计前须知"} {/* wps设计前须知 */}
                </ModalHeader>
                <ModalBody>
                    <div className="wps-body">
                        <pre><p className="explainWords">
{
`\n\
${json['cm6011-000170']}\n\
    ${json['cm6011-000171']}\n\
    ${json['cm6011-000172']}\n\
    ${json['cm6011-000173']}\n\
    ${json['cm6011-000178']}\n\
    \n\
${json['cm6011-000174']}\n\
    [Support]\n\
    JsApiPlugin=true\n\
    JsApiShowWebDebugger=false\n\
    \n\
    [Server]\n\
    JSPluginsServer=${this.baseUrl}/nccloud/resources/hrhi/public/wpsconfig/jsplugins.xml\n\
    \n\
    `
}
                       </p></pre>
                        
                    </div>
                    <NCCheckbox
                            className="wps-checkbox"
                            color="primary"
                            onChange={this.onChangeHandle}
                            checked={isNeedWpsInterview}
                        >
                            {json['cm6011-000175'] || '不再弹出设计前配置说明'}{/* 国际化处理： 不再弹出设计前配置说明*/}
                    </NCCheckbox>
                </ModalBody>
                <ModalFooter>
                    <CopyToClipboard text={
                    `
[Support]
JsApiPlugin=true
JsApiShowWebDebugger=false
        
[Server]
JSPluginsServer=${this.baseUrl}/nccloud/resources/hrhi/public/wpsconfig/jsplugins.xml
                    `
                    }
                        onCopy={() => this.props.copySure()}>
                        <NCButton
                            colors='primary'
                        >
                            {json['cm6011-000176'] || "复制全部配置"} {/*复制全部配置*/}
                        </NCButton>
                    </CopyToClipboard>
                    
                    <NCButton
                        colors='primary'
                        onClick={this.props.confirm}
                    >
                        {json['cm6011-000177'] || "我已完成上述操作"} {/*我已完成上述操作*/}
                    </NCButton>
                    <NCButton
                        onClick={this.closeModal}
                    >
                        {json['cm6011-000054']}{/*取消*/}
                    </NCButton>
                </ModalFooter>
            </NCModal>
        );
    }
}

export default WpsInitModal;